<template>
    <div class="">
        <div class="text-base component-title"><img class="w-[24px] h-[24px]" :src="Icon" />
            <div>{{ title }}</div>
        </div>
        <el-select v-model="samplerMethodValue"  :placeholder="samplerMethodPlaceholder" class="w-full mt-[10px]">
            <el-option v-for="(item) in samplerMethodList" :key="item.model_name" :label="item.model_name"
                :value="item.model_name" />
        </el-select>
        <el-select v-model="hiresFixValue"  :placeholder="hiresFixPlaceholder" class="w-full mt-[10px]">
            <el-option v-for="(item) in hiresFixList" :key="item.model_name" :label="item.model_name"
                :value="item.model_name" />
        </el-select>
    </div>
</template>

<script setup lang="ts">
import { useVModels } from '@vueuse/core'
import Icon from '@/assets/images/drawing/icon_prompt.png'
const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()
const props = withDefaults(
    defineProps<{
        samplerMethodList?: any,
        samplerMethodValue?: any,
        samplerMethodPlaceholder?: string,
        hiresFixList?: any,
        hiresFixValue?: any,
        hiresFixPlaceholder?: string,
        title?: string,
    }>(),
    {
        samplerMethodList: [],
        samplerMethodValue: '',
        hiresFixList: [],
        hiresFixValue: '',
        title: '',
        hiresFixPlaceholder: '',
        samplerMethodPlaceholder: ''
    }
)
const { samplerMethodValue, hiresFixValue } = useVModels(props, emit)

watchEffect(() => {
    const samplerMethodList = props.samplerMethodList
    if (samplerMethodList.length !== 0) {
        samplerMethodValue.value = samplerMethodList[0].model_name
    }
    const hiresFixList = props.hiresFixList
    if (hiresFixList.length !== 0) {
        hiresFixValue.value = hiresFixList[0].model_name
    }
})
</script>

<style scoped>
.style-container>div {
    cursor: pointer;
    margin-top: 10px;
    margin-right: 10px;
    border-radius: 4px;
    padding: 8px;
    border: 2px solid #e5e5e5;
}

.style-container>div:nth-child(3n) {
    margin-right: 0px;
}

.style-container .style-active {
    border: 2px solid var(--el-color-primary);
}

.component-title {
    display: flex;
    align-items: center;
    height: 20px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 16px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
</style>
